<template>
  <div class="home-date">
    <div class="time"  @click="selectDate">
        <div class="data">
            <div>入住</div>
            <div class="text">{{ formatDay(startDate) }}</div>
        </div>
        <div class="alone">共{{ during }}晚</div>
        <div class="data">
            <div>离店</div>
            <div class="text">{{ formatDay(leaveDate) }}</div>
        </div>
    </div>
    <div class="concent">
        <div>价格不限</div>
        <div>人数不限</div>
    </div>

    <van-calendar 
        v-model:show="show" 
        type="range" 
        :show-confirm="false"
        @confirm="onConfirm" 
        allow-same-day
        safe-area-inset-top
    />
  </div>
</template>

<script setup>
    import {ref} from "vue"
    import useHomeStore from '@/stores/modules/home';
    import { storeToRefs } from 'pinia';
    import {formatDay} from "@/utils/getDate"

    const homeStore = useHomeStore()
    const {startDate,leaveDate,during} = storeToRefs(homeStore)

    const show = ref(false)

    function selectDate(){
        show.value = true
    }
    function onConfirm(data){
        homeStore.changDate(data)
        console.log(startDate);
        show.value = false
    }
</script>

<style lang="less" scoped>
    .home-date {
        
        color: #666;
        border-top: #f1f1f1 1px solid;
        border-bottom: #f1f1f1 1px solid;
        .time {
            display: flex; 
            justify-content: space-between;
            border-bottom: #f1f1f1 1px solid;
            padding: 10px 20px;
            .data {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .text {
                color: #333;
            }
        }
        .concent {
            display: flex; 
            justify-content: space-between;
            padding: 10px 20px;
        }
    }
</style>